<template>
    <view
        class="page"
        :style="{
            '--color': color,
            '--bgcolor': pageSet.bgColor,
            '--tit-size': pageSet.titSize * 2 + 'rpx',
            '--tit-color': pageSet.titColor,
            '--tit-weight': pageSet.titWeight,
            '--info-size': pageSet.infoSize * 2 + 'rpx',
            '--info-color': pageSet.infoColor,
            '--info-weight': pageSet.infoWeight
        }"
    >
        <status-bar :title="tabTitle" back="0" :goHome="fromShare"></status-bar>
        <!-- 返回顶部 -->
        <backTop v-if="toTop"></backTop>
        <!-- 组件 -->
        <view v-if="pageData.length">
            <block v-for="(item, index) in pageData" :key="index">
                <Bannel v-if="item.type == 'banner'" :pageData="item.compCont" :isImmerse="1"></Bannel>
                <adv v-if="item.type == 'advertisement'" :pageData="item.compCont"></adv>
                <hotZone v-if="item.type == 'hotZone'" :pageData="item.compCont"></hotZone>
                <VideoList v-if="item.type == 'video'" :pageData="item.compCont"></VideoList>
                <divider v-if="item.type == 'divider'" :pageData="item.compCont"></divider>
            </block>
        </view>
        <!-- 顶部分类 -->
        <view class="classNav" :style="{ top: totalHeight + 'px' }" v-if="columnData">
            <u-tabs
                :list="columnData"
                keyName="website_list_title"
                :lineColor="color"
                lineWidth="26"
                :current="checkId"
                @click="checkList"
                :inactiveStyle="{ color: '#666', fontSize: '26rpx', transform: 'scale(1)' }"
                :activeStyle="{ color, fontSize: '26rpx', fontWeight: 'bold', transform: 'scale(1.05)' }"
            ></u-tabs>
        </view>

        <view v-if="artList.length">
            <!-- 自然排列 -->
            <view class="p-left30 p-right30" v-if="!pageSet.style">
                <view v-for="(item, index) in artList" :key="index" @click="$pop.artDetails(item, noPage)">
                    <!-- 没有图片 -->
                    <view class="p-top30 p-bot30 bot" v-if="!item.website_article_img && !item.website_article_atlas">
                        <text class="tit ellipsis_2">{{ item.website_article_title }}</text>
                        <view class="d-flex a-center m-top40 color_77 bold400">
                            <text class="m-right12">{{ item.website_article_views }}阅读</text>
                            <text class="m-right12">{{ item.allZan }}点赞</text>
                            <text class="m-right12">{{ item.allComment }}评论</text>
                        </view>
                    </view>
                    <!-- 右边小图 -->
                    <view class="p-top30 p-bot30 bot" v-if="item.website_article_img && !item.website_article_atlas">
                        <view class="d-flex j-sb">
                            <view style="width: 430rpx">
                                <view class="tit ellipsis_2 m-bot20">{{ item.website_article_title }}</view>
                                <view class="info ellipsis">{{ item.website_article_info }}</view>
                            </view>
                            <image :src="$imgUrls(item.website_article_img)" mode="aspectFill" class="list_one_img"></image>
                        </view>
                        <view class="d-flex a-center color_77 bold400 m-top40">
                            <text class="m-right12">{{ item.website_article_views }}阅读</text>
                            <text class="m-right12">{{ item.allZan }}点赞</text>
                            <text class="m-right12">{{ item.allComment }}评论</text>
                        </view>
                    </view>
                    <!--  一张大图 -->
                    <view class="p-top30 p-bot30 bot" v-if="item.website_article_atlas.length == 1">
                        <text class="tit ellipsis_2">{{ item.website_article_title }}</text>
                        <image :src="$imgUrls(item.website_article_atlas[0])" mode="aspectFill" class="list_MAX_img m-top30 m-bot40"></image>
                        <view class="row a-center color_77 bold400">
                            <text class="m-right12">{{ item.website_article_views }}阅读</text>
                            <text class="m-right12">{{ item.allZan }}点赞</text>
                            <text class="m-right12">{{ item.allComment }}评论</text>
                        </view>
                    </view>
                    <!-- 多图 -->
                    <view class="p-top30 p-bot30 bot" v-if="item.website_article_atlas.length > 1">
                        <text class="tit ellipsis_2">{{ item.website_article_title }}</text>
                        <scroll-view scroll-x="true" class="scroll-row m-top20 m-bot40">
                            <image :src="$imgUrls(subItem)" mode="aspectFill" class="list_more_img" v-for="(subItem, subIndex) in item.website_article_atlas" :key="subIndex"></image>
                        </scroll-view>
                        <view class="row a-center color_77 bold400">
                            <text class="m-right12">{{ item.website_article_views }}阅读</text>
                            <text class="m-right12">{{ item.allZan }}点赞</text>
                            <text class="m-right12">{{ item.allComment }}评论</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 一行两个-优先展示缩略图 -->
            <view class="padding20 d-flex f-wrap j-sb" v-if="pageSet.style == 1">
                <view class="photo m-bot40" v-for="(item, index) in artList" :key="index" @click="$pop.artDetails(item, noPage)">
                    <image :src="$imgUrls(item.website_article_img)" mode="aspectFill" v-if="item.website_article_img"></image>
                    <image :src="$imgUrls(item.website_article_atlas[0])" mode="aspectFill" v-else-if="item.website_article_atlas"></image>
                    <image :src="staticUrl + '/images/imageLoading.png'" mode="aspectFill" v-else></image>
                    <view class="padding10">
                        <view class="tit m-bot10 ellipsis">{{ item.website_article_title }}</view>
                        <view class="info ellipsis">{{ item.website_article_info }}</view>
                    </view>
                </view>
            </view>

            <!-- 卡片式 -->
            <view class="padding30" v-if="pageSet.style == 2">
                <view class="card padding30 m-bot30 bor_radius_20 bgwhite" v-for="(item, index) in artList" :key="index" @click="$pop.artDetails(item, noPage)">
                    <view class="d-flex a-center m-bot30 color_77">
                        <view class="m-right40">{{ item.website_article_addtime }}</view>
                        <view class="flex-1">{{ item.website_article_views }}阅读</view>
                        <view>
                            <text class="iconfont icon-guanzhu3 size36 thmeColor" v-if="item.myZan == 1" @click.stop="artZan(item)"></text>
                            <text class="iconfont icon-guanzhu size36" v-if="item.myZan == 0" @click.stop="artZan(item)"></text>
                            <text class="m-left4">{{ item.allZan }}</text>
                        </view>
                    </view>
                    <view class="tit ellipsis_2 m-bot20">{{ item.website_article_title }}</view>
                    <view class="info ellipsis_2 m-bot20" v-if="item.website_article_info">{{ item.website_article_info }}</view>
                    <image :src="$imgUrls(item.website_article_img)" mode="widthFix" v-if="item.website_article_img"></image>
                    <image :src="$imgUrls(item.website_article_atlas[0])" mode="widthFix" v-else-if="item.website_article_atlas"></image>
                </view>
            </view>
        </view>

        <empty v-if="nothing" cat="3" msg="没有找到相关内容哦 ~"></empty>

        <tabBar :tab="9"></tabBar>

        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import Bannel from '@/components/home/Bannel.vue';
    import adv from '@/components/home/adv.vue';
    import hotZone from '@/components/home/hotZone.vue';
    import VideoList from '@/components/home/VideoList.vue';
    import divider from '@/components/home/divider.vue';
    export default {
        data() {
            return {
                staticUrl: this.staticUrl,
                artList: [], // 文章列表
                columnData: '', // 分类列表
                listId: '', // 列表id
                page: 1, // 分页页码
                more: false,
                nothing: false,
                toTop: false,
                checkId: -1, // 当前选中标签的索引
                fromShare: 0,
                pageSet: {
                    // 页面设置
                    style: 0,
                    bgColor: '#fff',
                    titSize: 16,
                    titWeight: 300,
                    titColor: '#000',
                    infoSize: 14,
                    infoWeight: 300,
                    infoColor: '#777'
                },
                pageData: '', // diy组件
                showModal: false,
                noPage: 0
            };
        },
        components: {
            Bannel,
            adv,
            hotZone,
            VideoList,
            divider
        },
        onLoad(e) {
            if (e.listId) this.listId = e.listId;
            if (e.noPage) this.noPage = e.noPage;
            if (e.fromShare) this.fromShare = e.fromShare;
            this.diyget();
        },
        onShow() {
            this.getColumn();
        },
        methods: {
            diyget() {
                this.$http
                    .get({
                        url: '/newdiy/api/v1/diy/getDiyPage',
                        data: {
                            front: 1,
                            type: 3
                        }
                    })
                    .then((res) => {
                        if (!res.data) return;
                        if (res.data.pageSet) this.pageSet = res.data.pageSet;
                        this.pageData = res.data.front_value || [];
                    });
            },
            getColumn() {
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/getWebsiteList'
                    })
                    .then((res) => {
                        if (res.data && res.data.length) {
                            this.columnData = res.data;
                            if (!this.listId) {
                                this.checkId = 0;
                                this.listId = res.data[0].website_list_id;
                            }
                            let index = this.columnData?.findIndex((item) => item.website_list_id == this.listId);
                            this.checkId = index == -1 ? 0 : index;
                            this.getList();
                        } else {
                            this.nothing = true;
                        }
                    });
            },
            checkList({ index, website_list_id }) {
                if (this.checkId != index) {
                    this.checkId = index;
                    this.artList = [];
                    this.page = 1;
                    this.$showLoading('加载中');
                    this.listId = website_list_id;
                    this.getList();
                }
            },
            getList() {
                this.more = false;
                this.nothing = false;
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/getArticle',
                        data: {
                            listId: this.listId,
                            pagecount: 10,
                            page: this.page
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.data) {
                            res.data.forEach((item) => {
                                if (item.website_article_atlas) {
                                    item.website_article_atlas = item.website_article_atlas.split(',');
                                }
                            });
                            this.artList = this.page == 1 ? res.data : this.artList.concat(res.data);
                            if (res.data.length > 9) this.more = true;
                            // this.$BarTitle(res.listTitle)
                        }

                        if (!this.artList || this.artList.length < 1) this.nothing = true;
                    });
            },
            artZan(item) {
                if (!this.vid) return (this.showModal = true);
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/zanArticle',
                        data: {
                            article_id: item.website_article_id,
                            operation: item.myZan == 1 ? 2 : 1 // 点赞传1，取消传2，zan为1是已点赞
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        item.myZan = item.myZan == 1 ? 0 : 1;
                        let num = parseInt(item.allZan);
                        item.allZan = item.myZan == 1 ? num + 1 : num - 1;
                    });
            }
        },
        onReachBottom() {
            if (this.more) {
                this.page += 1;
                this.getList();
            }
        },
        computed: {
            ...mapState(['color', 'totalHeight', 'tabTitle', 'vid', 'share'])
        },
        onShareAppMessage() {
            let share = this.share;
            let path;
            if (this.noPage == 1) {
                path = `/pages/index/index?share_v_id=${this.vid}&pageType=999`;
            } else {
                path = `/pages/index/index?share_v_id=${this.vid}&pageType=5&listId=${this.listId}`;
            }
            return {
                title: share.title,
                desc: share.desc,
                path,
                imageUrl: share.imageUrl
            };
        },
        onPageScroll(e) {
            if (e.scrollTop > 100) {
                this.toTop = true;
            } else {
                this.toTop = false;
            }
        }
    };
</script>

<style scoped lang="scss">
    .page {
        background-color: var(--bgcolor);
    }
    .classNav {
        position: sticky;
        top: 0;
        left: 0;
        right: 0; // 解决右侧遮挡
        z-index: 33;
        background: var(--bgcolor);
    }
    .list_one_img {
        width: 200rpx;
        height: 120rpx;
    }
    .list_MAX_img {
        width: 100%;
        height: 340rpx;
    }
    .list_more_img {
        width: 210rpx;
        height: 180rpx;
        &:not(:last-child) {
            margin-right: 30rpx;
        }
    }
    .photo {
        width: 350rpx;
        image {
            width: 100%;
            height: 524rpx;
            border-radius: 10rpx;
        }
    }
    .card {
        box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
        image {
            width: 436rpx;
        }
    }
    .tit {
        font-size: var(--tit-size);
        color: var(--tit-color);
        font-weight: var(--tit-weight);
    }
    .info {
        font-size: var(--info-size);
        color: var(--info-color);
        font-weight: var(--info-weight);
    }
</style>
